<template>
  <div class="img-container">
    <img
      :src="imgData.gifPath"
      onerror="this.src='https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
      @dblclick="importToAE"
    />
    <span>{{imgData.title}}</span>
  </div>
</template>


<script>
export default {
  props: ["imgData"],
  data() {
    return {
      id: 6,
      imgSrc: ""
    };
  },
  methods: {
    importToAE: function() {
      var cs = new CSInterface();
      console.log(this.imgData);
      let a = this.imgData.aepPath.replace(/\\/g, "\\\\");
      let b = this.imgData.title;
      cs.evalScript('ImportAep("' + a + '", "' + b + '")');
    }
  }
};
</script>


<style scoped>
.img-container {
  width: 180px;
  height: 107.38;
  float: left;
  padding: 10px;
  text-align: center;
  border: solid 1px;
  border-color: rgba(255, 255, 255, 0.5);
}
.img-container:hover {
  border-color: yellow;
  cursor: pointer;
}
.img-container img {
  width: 150px;
}
.img-container span {
  display: block;
  color: white;
  font-size: x-small;
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
